<template>
    <div class="time-box">
        <div v-for="(item, index) in list" :key="item.id"
            :class="['time-item', { timeItemActive: curSecondsConfig == index }]" @click="setSeconds(item, index)">
            <div class="second">{{ `${item.seconds} ${t(item.secondsTime)}` }}</div>
            <div class="number">{{ item.minTrade }}+</div>
            <div class="precent">{{ item.odds }}%</div>
        </div>
    </div>
</template>

<script setup>
import useLanguage from '@/hooks/useLanguage';
import { reactive, ref, onMounted, onBeforeUnmount, watch } from 'vue'
const { t } = useLanguage()

const props = defineProps({
    modelValue: {
        type: Number,
        required: true,
        default: 0
    },
    list: {
        type: Array,
        default: () => []
    },
})

const emit = defineEmits(['update:modelValue','onChange'])

const curSecondsConfig = ref(0)
const setSeconds = (item, index) => {
    curSecondsConfig.value = index
}

watch(curSecondsConfig ,(newVal, oldVal) => {
    emit('update:modelValue', newVal)
    emit('onChange', newVal)
})

</script>

<style lang="less" scoped>
.time-box {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    .time-item {
        border: 1px solid #ccc;
        width: 100%;
        box-sizing: border-box;
        padding: 5px;
        transition: all .3s;
        text-align: center;
        font-size: 13px;

        div {
            padding: 5px 0px;
        }
        .second {
            background-color: #FA3361;
        }

        .number,
        .precent {
            background-color: #FDC1CF;
        }
    }

    .timeItemActive {
        color: #fff;
        border: 1px solid #EAFFE9;
        background-color: #FF9A03;
    }
}
</style>